<template>
    <div class="content-wrap">
        <div class="authority-box">
            <p class="current-role">当前编辑角色为：<i class="color-primary">{{currentRoleName}}</i></p>
            <div class="authority-box-bottom">
                <div class="menu-box" ref="menuBox" :style="{ height: menuBoxHeight + 'px'}">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>菜单</span>
                        </div>
                        <div class="tree-box">
                            <el-tree
                                :data="menuData"
                                show-checkbox
                                :highlight-current="true"
                                node-key="id"
                                @node-click="nodeTapFn"
                                @check-change="checkMenuFn"
                                :check-strictly="true"
                                :default-expand-all="true"
                                :default-checked-keys="menuCheckArr"
                                :props="defaultProps">
                            </el-tree>
                        </div>
                    </el-card>
                </div>
                
                <div class="authority-box">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>权限</span>
                        </div>
                        <div class="check-box" v-if="authData.length > 0">
                            <el-checkbox 
                                v-model="item.enabled" 
                                v-for="(item, index) in authData" 
                                :key="index"
                                @change="checkAuthBtnFn(item.id, item.enabled)"
                            >
                                {{item.name}}
                            </el-checkbox>
                        </div>
                        <div class="check-box" v-else>
                            <p class="no-authority-data">暂无数据</p>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Storage from "@/utils/storage";
export default {
    data() {
        return {
            currentRoleName: '',

            phone: '',
            userName: '',
            gender: '',
            department: '',
            roleName: '',
            state: '',

            menuBoxHeight: 200,
            menuData: [],
            roleMenuData: [],
            roleMenuArr: [],
            menuCheckArr: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },

            authData: [],
            roleAuthData: [],
            roleAuthArr: [],

            checkMenuArr: [],
        }
    },
    created() {
        this.currentRoleName = this.$route.query.roleName
        this.getRoleMenuFn()
    },
    methods: {
        getAllMenuFn() { //获取所有菜单
            this.$http.get('/app/menu')
                .then((res) => {
                    if(res.data.length > 0) {
                        let dd = []
                        for(let i = 0; i < res.data.length; i++) {
                            let item = res.data[i]
                            if(this.roleMenuArr.includes(item.id)) {
                                this.menuCheckArr.push(item.id)
                            }
                            let mm = {
                                id: item.id,
                                label: item.title,
                                children: []
                            }
                            for(let j = 0; j < item.children.length; j++) {
                                let iitem = item.children[j]
                                if(this.roleMenuArr.includes(iitem.id)) {
                                    this.menuCheckArr.push(iitem.id)
                                }
                                let nn = {
                                    id: iitem.id,
                                    label: iitem.title
                                }
                                mm.children.push(nn)
                            }
                            dd.push(mm) 
                        }
                        this.menuData = dd;
                    }
                })
                .then((res) => {
                    this.menuBoxHeightFn()
                })
        },

        getRoleMenuFn() { //获取角色菜单
            this.$http.get(`/role/${this.$route.query.roleId}/menu`)
                .then((res) => {
                    if(res.data.length > 0) {
                        let dd = []
                        for(let i = 0; i < res.data.length; i++) {
                            let item = res.data[i]
                            this.roleMenuArr.push(item.id)
                            let mm = {
                                id: item.id,
                                label: item.title,
                                children: []
                            }
                            if(item.children) {
                                for(let j = 0; j < item.children.length; j++) {
                                    let iitem = item.children[j]
                                    this.roleMenuArr.push(iitem.id)
                                    let nn = {
                                        id: iitem.id,
                                        label: iitem.title
                                    }
                                    mm.children.push(nn)
                                }
                            }
                            dd.push(mm) 
                        }
                        this.roleMenuData = dd;
                    }
                })
                .then(() => {
                    this.getAllMenuFn()
                })
        },

        menuBoxHeightFn() { //菜单栏高度
            this.menuBoxHeight = window.innerHeight - this.$refs.menuBox.offsetTop - 50
        },

        nodeTapFn(data) { //点击树的节点
            this.getAuthorityFn(data.id)
        },
        getAllAuthBtnFn(routerId) { //获取菜单下的所有权限按钮
            let params = {
                pgCt: 1,
                pgSz: 20
            }
            this.$http.get(`/router/${routerId}/buttons`, params)
                .then((res) => {
                    let arr = []
                    res.data.records.forEach(item => {
                        item.enabled = this.roleAuthArr.includes(item.id)

                        let obj = {
                            id: item.id,
                            routerId: item.routerId,
                            name: item.name
                        }
                        arr.push(obj)
                    })
                    console.log('arr:', arr)
                    this.authData = res.data.records
                }) 
        },
        getAuthorityFn(routerId) { //获取当前角色下的权限按钮
            this.$http.get(`/role/${this.$route.query.roleId}/${routerId}/button`)
                .then((res) => {
                    this.roleAuthData = res.data
                    if(res.data.length > 0) {
                        res.data.forEach(item => {
                            this.roleAuthArr.push(item.id)
                        })
                    }
                })
                .then(() => {
                    this.getAllAuthBtnFn(routerId)
                })
        },
        checkMenuFn(nodeVal, isSelect, selectData) { //添加/删除菜单
            let params = [nodeVal.id]
            if(isSelect) {
                this.addMenuFn(params)
            }else{
                this.deleteMenuFn(params)
            }
        },
        addMenuFn(params) { //添加菜单
            this.$http.post(`/role/add/${this.$route.query.roleId}/router`, params)
                .then((res) => {
                    Storage.set('isAllotTap', true)
                })
        },
        deleteMenuFn(params) { //删除菜单
            this.$http.post(`/role/delete/${this.$route.query.roleId}/router`, params)
                .then((res) => {
                    Storage.set('isAllotTap', true)
                })
        },

        checkAuthBtnFn(id, isSelect) { //分配按钮权限
            let params = [id]
            if(isSelect) {
                this.addBtnFn(params)
            }else{
                this.deleteBtnFn(params)
            }
        },
        addBtnFn(params) { //添加按钮权限
            this.$http.post(`/role/add/${this.$route.query.roleId}/buttons`, params)
                .then((res) => {
                    Storage.set('isAllotTap', true)
                })
        },
        deleteBtnFn(params) { //删除按钮权限
            this.$http.post(`/role/delete/${this.$route.query.roleId}/buttons`, params)
                .then((res) => {
                    Storage.set('isAllotTap', true)
                })
        },
    }
}
</script>

<style lang="scss" scoped>
    .content-wrap {
        .authority-box {
            .current-role {
                padding: 24px 15px 0;
                box-sizing: border-box;
                font-size: 16px;
            }
            .authority-box-bottom {
                display: flex;
                flex-wrap: wrap;
                padding-top: 24px;
                padding-left: 15px;
                .menu-box {
                    overflow-y: auto;
                }
                .authority-box {
                    margin-left: 32px;
                }
                .box-card {
                    width: 506px;
                    .clearfix {
                        font-size: 16px;
                    }
                    .check-box {
                        display: flex;
                        flex-direction: column;
                        label {
                            margin-bottom: 20px;
                        }
                        .no-authority-data {
                            padding: 10px 0;
                            box-sizing: border-box;
                            text-align: center;
                            color: #909399;
                        }
                    }
                }
            }
        }
    }
</style>